<template>
    <div>
        <div class="detail-container-top tbz" :class="{'tbz-success': bidDetail.investProcess === '100'}" v-if="bidDetail.bidStatus === 'TBZ' || bidDetail.bidStatus === 'DFK'">
            <div class="top-font">
                <div class="font-l">参考回报(元)</div>
                <div class="font-r">筹集进度<span class="day">{{bidDetail.investProcess + '%'}}</span></div>
            </div>
            <div class="amount">{{Number(bidDetail.earning) ? formatMoney(bidDetail.earning) : '暂无收益'}}</div>
            <div class="jiaxiAmout" v-if="Number(bidDetail.jiaxiAmount)">
                <p class="title">额外收益(元)<span class="aboutAnswer" @click="jiaxiIntro"></span></p>
                <p class="jiaxiAmoutacct">加息收益+<span>{{bidDetail.jiaxiAmount}}</span></p>
            </div>
        </div>
        <div class="detail-container-top yjq" v-else-if="bidDetail.bidStatus === 'YJQ'">
            <div class="top-font">
                <div class="font-l">参考回报(元)</div>
                <div class="font-r">距到期还剩<span class="day">{{bidDetail.dayLeft}}</span>天</div>
            </div>
            <div class="amount">{{formatMoney(bidDetail.earning)}}</div>
            <div class="jiaxiAmout" v-if="Number(bidDetail.jiaxiAmount)">
                <p class="title">额外收益(元)<span class="aboutAnswer" @click="jiaxiIntro"></span></p>
                <p class="jiaxiAmoutacct">加息收益+<span>{{bidDetail.jiaxiAmount}}</span></p>
            </div>
        </div>
        <div class="detail-container-top hkz" v-else>
            <div class="top-font">
                <div class="font-l">参考回报(元)</div>
                <div class="font-r">距到期还剩<span class="day">{{bidDetail.dayLeft}}</span>天</div>
            </div>
            <div class="amount">{{formatMoney(bidDetail.earning)}}</div>
            <div class="jiaxiAmout" v-if="Number(bidDetail.jiaxiAmount)">
                <p class="title">额外收益(元)<span class="aboutAnswer" @click="jiaxiIntro"></span></p>
                <p class="jiaxiAmoutacct">加息收益+<span>{{bidDetail.jiaxiAmount}}</span></p>
            </div>
        </div>
    </div>
</template>
<script>
  import formatMoney from '~/helper/formatMoney'
  import { MessageBox } from 'mint-ui'
  export default {
    name: 'investdetail-top',
    props: {
      bidDetail: {
        type: Object,
        default: () => {}
      }
    },
    methods: {
      formatMoney (money) {
        if (money) {
          return formatMoney.formatMoney(money)
        }
        return money
      },
      jiaxiIntro () {
        MessageBox({
          title: '',
          message: '1.加息收益根据收益方式发放，回款明细暂时不支持加息收益展示，请已实际收到为准<br /><br />' +
                    '2.若发生提前还款，加息收益会根据实际天数重新计算',
          confirmButtonText: '知道啦',
          confirmButtonClass: 'jiaxiUnderstand'
        })
      }
    }
  }
</script>
<style lang='sass' src="~/assets/sass/biddetail.sass"></style>